class RegForm {
    /**
     * domRoot 组件DOM根元素
     * onSubmit 提交时的回调函数 接收一个参数userInfo
     */
    constructor(domRoot, onSubmitCallback) {
        // 接收组件对应的DOM根元素
        this.form = domRoot;
        this.onSubmitCallback = onSubmitCallback;

        /* 找出要操作的元素 */
        this.ipName = this.form.querySelector("#ipName");
        this.ipAge = this.form.querySelector("#ipAge");
        this.selGender = this.form.querySelector("#selGender");

        // 预定义用户数据
        this.userInfo = null;

        // 绑定事件监听器
        this.bindEventListener();
    }

    bindEventListener() {
        this.form.onsubmit = (e) => {
            // 阻止提交的默认事件
            e.preventDefault();

            /* 采集数据 */
            // console.log(this.ipName.value);
            // console.log(this.ipAge.value);
            // console.log(this.selGender.selectedOptions[0].innerText);

            /* 将数据封装到userInfo中 */
            this.userInfo = {
                name: this.ipName.value,
                age: this.ipAge.value * 1,
                gender: this.selGender.selectedOptions[0].innerText,
            };

            // 清空数据
            // this.ipName.value = ""
            // this.ipAge.value = ""

            console.log(this.userInfo);
            this.onSubmitCallback && this.onSubmitCallback(this.userInfo);
        };
    }

    getUserInfo() {
        return this.userInfo;
    }
}
